<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态侧边栏</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<style>
	* {
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	}
	
	:root {
	    --bg: #2f323f;
	}
	
	body {
	    min-height: 100vh;
	    background: var(--bg);
	}
	
	.navigation {
	    position: fixed;
	    inset: 40px 0 40px 20px;
	    background: #fff;
	    width: 75px;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	    align-content: center;
	    transition: 0.5s;
	}
	
	.navigation.active {
	    width: 250px;
	}
	
	.menuToggle {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 60px;
	    padding: 0 25px;
	    border-bottom: 1px solid rgba(0, 0, 0, .25);
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    cursor: pointer;
	}
	
	.menuToggle::before {
	    content: '';
	    position: absolute;
	    width: 30px;
	    height: 2px;
	    background: #333;
	    transform: translateY(-8px);
	    transition: .5s;
	}
	
	.navigation.active .menuToggle::before {
	    transform: translateY(0) rotate(45deg);
	}
	
	.menuToggle::after {
	    content: '';
	    position: absolute;
	    width: 30px;
	    height: 2px;
	    background: #333;
	    transform: translateY(8px);
	    box-shadow: 0 -8px 0 #333;
	    transition: .5s;
	}
	
	
	.navigation.active .menuToggle::after {
	    transform: translateY(0) rotate(-45deg);
	    box-shadow: 0 0 0 #333;
	}
	
	.navigation ul {
	    display: flex;
	    flex-direction: column;
	    width: 100%;
	}
	
	.navigation ul li {
	    list-style: none;
	    position: relative;
	    width: 100%;
	    height: 76px;
	    border-radius: 12px;
	    border: 8px solid transparent;
	    transition: .5s;
	}
	
	.navigation ul li.active {
	    transform: translateX(30px);
	    background: var(--bg);
	}
	
	.navigation ul li::before {
	    content: '';
	    position: absolute;
	    top: -28px;
	    right: -10px;
	    width: 20px;
	    height: 20px;
	    background: transparent;
	    border-bottom-right-radius: 20px;
	    box-shadow: 6px 5px 0 5px var(--bg);
	    transform: scale(0);
	    transform-origin: bottom right;
	    transition: .5s;
	}
	
	.navigation ul li.active::before {
	    right: 22px;
	    transform: scale(1);
	}
	
	.navigation ul li::after {
	    content: '';
	    position: absolute;
	    bottom: -28px;
	    right: -10px;
	    width: 20px;
	    height: 20px;
	    background: transparent;
	    border-top-right-radius: 20px;
	    box-shadow: 6px -3px 0 3px var(--bg);
	    transform: scale(0);
	    transform-origin: bottom right;
	    transition: .5s;
	}
	
	.navigation ul li.active::after {
	    right: 22px;
	    transform: scale(1);
	}
	
	.navigation ul li a {
	    position: relative;
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    width: 100%;
	    text-align: center;
	    text-decoration: none;
	    z-index: 1000;
	}
	
	.navigation ul li a .icon {
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    min-width: 60px;
	    height: 60px;
	    border-radius: 10px;
	    font-size: 1.75em;
	    line-height: 60px;
	    border: 6px solid transparent;
	    transition: .5s;
	}
	
	.navigation ul li a .icon i {
	    font-size: 24px;
	}
	
	.navigation ul li.active a .icon {
	    color: #fff;
	    background: var(--clr);
	}
	
	.navigation ul li a .icon::before {
	    content: '';
	    position: absolute;
	    top: 12px;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: var(--clr);
	    filter: blur(8px);
	    opacity: 0;
	    transition: 0.5s;
	}
	
	.navigation ul li.active a .icon::before {
	    opacity: .5;
	}
	
	.navigation ul li a .icon::after {
	    content: '';
	    position: absolute;
	    top: 10px;
	    left: -62px;
	    width: 15px;
	    height: 15px;
	    background: var(--clr);
	    border: 8px solid var(--bg);
	    border-radius: 50%;
	}
	
	.navigation ul li a .text {
	    position: relative;
	    padding: 0 15px;
	    color: #333;
	    display: flex;
	    align-items: center;
	    height: 60px;
	    opacity: 0;
	    visibility: hidden;
	    transition: .5s;
	}
	
	.navigation.active ul li a .text {
	    visibility: visible;
	    opacity: 1;
	}
	
	.navigation ul li.active a .text {
	    color: #fff;
	}
</style>
<body>
    <div class="navigation">
        <div class="menuToggle"></div>
        <ul>
            <li class="list active">
                <a href="#" style="--clr:#f44336;">
                    <span class="icon">
                        <i class="iconfont icon-home"></i>
                    </span>
                    <span class="text">Home</span>
                </a>
            </li>
            <li class="list">
                <a href="#" style="--clr:#ffa117;">
                    <span class="icon">
                        <i class="iconfont icon-user"></i>
                    </span>
                    <span class="text">About</span>
                </a>
            </li>
            <li class="list">
                <a href="#" style="--clr:#0fc70f;">
                    <span class="icon">
                        <i class="iconfont icon-chat"></i>
                    </span>
                    <span class="text">Messages</span>
                </a>
            </li>
            <li class="list">
                <a href="#" style="--clr:#2196f3;">
                    <span class="icon">
                        <i class="iconfont icon-xiangji1"></i>
                    </span>
                    <span class="text">Photos</span>
                </a>
            </li>
            <li class="list">
                <a href="#" style="--clr:#b145e9;">
                    <span class="icon">
                        <i class="iconfont icon-setting"></i>
                    </span>
                    <span class="text">Settings</span>
                </a>
            </li>
        </ul>
    </div>

</body>
<script>
	let navigation = document.querySelector('.navigation')
	let menuToggle = document.querySelector('.menuToggle')
	
	menuToggle.addEventListener('click', function () {
	    navigation.classList.toggle('active')
	})
	
	let list = document.querySelectorAll('.list')
	function activeLink() {
	    list.forEach(item => {
	        item.classList.remove('active')
	        this.classList.add('active')
	    })
	}
	
	list.forEach(item => {
	    item.addEventListener('click', activeLink)
	})
</script>
</html>